<template>
  <div>
    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
      <el-form-item label="请输入" prop="str">
        <el-input v-model="formData.str" type="textarea" placeholder="请输入：一行表示一条数据
   1.原生表单：List<NameValuePair> formParams = new ArrayList<>(); 最后一行为变量命名, 例如formParams-webResponse，不输入就默认
   2.map表单：Map<String,String> paramMap = Maps.newLinkedHashMap(); 最后一行为变量命名, 例如paramMap-webResponse，不输入就默认"
                  :autosize="{minRows: 8, maxRows: 4}" :style="{width: '100%'}"></el-input>
      </el-form-item>

      <el-form-item label="选择类型" prop="type">
        <el-radio-group v-model="formData.type" size="medium">
          <el-radio v-for="(item, index) in typeOptions" :key="index" :label="item.value"
                    :disabled="item.disabled">{{ item.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item size="large">
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>


      <el-form-item label="结果输出" prop="resStr">
        <el-input v-model="resStr" type="textarea" placeholder="提交后结果显示区域" hide-required-asterisk="false"
                  :autosize="{minRows: 8, maxRows: 8}" :style="{width: '100%'}"></el-input>
      </el-form-item>

    </el-form>

    <div>

      <button @click="gotolink" type="primary">about</button>
      <button @click="gotolink1" type="primary">hello</button>
    </div>
  </div>

</template>
<script>
import {sendMsg, queryVisits} from "../components/api";


export default {
  data() {
    return {
      iptableData: [],
      formData: {
        str: undefined,
        type: 1,
      },
      rules: {
        str: [{
          required: true,
          message: '请输入请输入',
          trigger: 'blur'
        }],
        type: [{
          required: true,
          message: '选择类型不能为空',
          trigger: 'change'
        }],
      },
      typeOptions: [{
        "label": "id加单引号",
        "value": 1
      }, {
        "label": "Name加单引号",
        "value": 2
      }, {
        "label": "身份证加密",
        "value": 3
      }, {
        "label": "原生表单",
        "value": 4
      }, {
        "label": "MAP表单",
        "value": 5
      }, {
        "label": "JSON表单",
        "value": 6
      }
      ],
      resStr: "",
      dates: ""
    }
  },
  created() {
    queryVisits().then(response => {
      this.iptableData = response.data;
    })
  },


  methods: {
    gotolink(){
      this.$router.push("/about")
    },
    gotolink1(){
      this.$router.push("/hello")
    },
    submitForm() {
      this.$refs.elForm.validate(valid => {
        if (valid) {
          sendMsg(this.formData).then(response => {
            // this.$alert("发送成功")
            this.resStr = response.msg;
            // this.$alert("msg：" + this.resStr)
          }).catch(() => {
          })
          queryVisits().then(response => {
            this.iptableData = response.data;
          })
        }
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
      this.resStr = "";
    },
  }
}
</script>

<style>

</style>
